<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <div @click="btnClick">
    aaaaa
    <!--1. .stop修饰符的使用-->
    <button @click.stop="btnClick">按钮</button>
  </div>

  <!--2. prevent修饰符的使用-->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

  <!--3. 监听加键盘的某个键的点击-->
  <input type="text" @keyup.enter="keyUp">

  <!--4. .once修饰符的使用-->
  <button @click.once="btn2Click">按钮2</button>
</div>


<script src="../js/vue%20.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      counter: 0,
      abc: 123
    },
    methods: {
      btnClick() {
        console.log("btnClick");
      },
      divClick() {
        console.log("divClick");
      },
      submitClick() {
        console.log('submitClick');
      },
      keyUp() {
        console.log('keyUp');
      },
      btn2Click() {
        console.log('btn2Click');
      }
    }
  })
</script>
</body>
</html>